<div class="flex justify-between items-center p-4">
  <div class="text-xl">
    {{ 'PAC.KEY_WORDS.SEMANTIC_MODEL' | translate: {Default: "Semantic Models"} }}
  </div>

  <input #fileUpload type="file" class="file-input"
      (change)="onUpload($event)"
      (click)="fileUpload.value=null;"
    >
  <div ngmButtonGroup>
    <button mat-button displayDensity="cosy"
      [matTooltip]="'PAC.MODEL.UploadSemanticModel' | translate: {Default: 'Upload Semantic Model File'}"
      matTooltipPosition="above"
      [disabled]="modelUploading"
      (click)="fileUpload.click()" >
      @if (modelUploading) {
        <ngm-spin class="inline-block"/>
        {{ 'PAC.ACTIONS.Uploading' | translate: {Default: "Uploading"} }}...
      } @else {
        {{ 'PAC.ACTIONS.UPLOAD' | translate: {Default: "Upload"} }}
      }
    </button>
    <button mat-raised-button color="primary" displayDensity="cosy"
      (click)="onNewModel()">
      <div class="flex items-center">
        <i class="ri-add-line text-lg mr-1"></i>
        {{ 'PAC.ACTIONS.NEW' | translate: {Default: "New"} }}
      </div>
    </button>

    <button mat-icon-button displayDensity="cosy"
      [cdkMenuTriggerFor]="menu"
    >
      <mat-icon>more_vert</mat-icon>
    </button>
  </div>
</div>

<!-- <div>
  <nav mat-tab-nav-bar [tabPanel]="tabPanel" color="accent" disableRipple displayDensity="cosy" mat-stretch-tabs="false" mat-align-tabs="start">
    <span mat-tab-link [active]="type === 'my'" (click)="type='my'">
      {{ 'PAC.MENU.MODEL.MY' | translate: {Default: "My"} }}
    </span>

    <span mat-tab-link [active]="type === 'all'" *ngxPermissionsOnly="[AnalyticsPermissionsEnum.BUSINESS_AREA_EDIT]"
      (click)="type='all'">
      {{ 'PAC.MENU.MODEL.ALL' | translate: {Default: "All"} }}
    </span>
  </nav>
  
</div> -->

<ngm-tree-table class="w-full h-full"
  [data]="models$ | async"
  [columns]="columns"
  [nameLabel]=" 'PAC.MODEL.Name' | translate: {Default: 'Name'} "
  [displayDensity]="DisplayDensity.cosy"
  [nameCellTemplate]="nameTempl"
  [initialLevel]="1000"
  [stickyHeaders]="true"
>
</ngm-tree-table>

@if (loading) {
  <ngm-spin class="absolute w-full h-full top-0 left-0" />
}

<ng-template #nameTempl let-key="key" let-name="name" let-item="raw">
  <div class="max-w-[300px] inline-flex justify-start items-center overflow-hidden whitespace-nowrap text-ellipsis">
    <a *ngIf="item.__isModel__" [routerLink]="['/models', key]" class="flex justify-start items-center">
      <span class="font-notoColorEmoji">🧊</span>
      <mat-icon *ngIf="item.agentType==='wasm'" fontSet="material-icons-round" displayDensity="compact" class="shrink-0 text-emerald-600">memory</mat-icon>
      <span class="text-ellipsis overflow-hidden">{{name}}</span>
    </a>
    <span *ngIf="!item.__isModel__">
      {{name}}
    </span>
  </div>
</ng-template>

<ng-template #menu>
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem color="primary" (click)="onNewModel(null, 'sql')">
      <div class="flex items-center">
        <i class="ri-add-line text-lg mr-1"></i>
        {{ 'PAC.ACTIONS.NEW' | translate: {Default: "New"} }} SQL {{ 'PAC.KEY_WORDS.MODEL' | translate: {Default: "Model"} }}
      </div>
    </button>
  
    <button cdkMenuItem color="primary" (click)="onNewModel(null, 'mdx')">
      <div class="flex items-center">
        <i class="ri-add-line text-lg mr-1"></i>
        {{ 'PAC.ACTIONS.NEW' | translate: {Default: "New"} }} MDX {{ 'PAC.KEY_WORDS.MODEL' | translate: {Default: "Model"} }}
      </div>
    </button>
  
    <button cdkMenuItem color="primary" (click)="onNewWASMModel()">
      <div class="flex items-center">
        <i class="ri-add-line text-lg mr-1"></i>
        {{ 'PAC.ACTIONS.NEW' | translate: {Default: "New"} }} WASM {{ 'PAC.KEY_WORDS.MODEL' | translate: {Default: "Model"} }}
      </div>
    </button>
  </div>
</ng-template>

<ng-template #actions let-item="raw" let-key="key">
  @if (item.__isModel__) {
    <div class="pac__table-actions flex items-center gap-2" >
      <button mat-icon-button displayDensity="cosy"
        [matTooltip]="'PAC.ACTIONS.Edit' | translate: {Default: '✒️Edit'}"
        matTooltipPosition="above"
        [routerLink]="['/models', key]">
        <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
      </button>
  
      <button mat-icon-button displayDensity="cosy"
        [matTooltip]="'PAC.ACTIONS.CreateStory' | translate: {Default: '📖Create Story'}"
        matTooltipPosition="above"
        (click)="createStory(item)">
        <mat-icon fontSet="material-icons-outlined">local_library</mat-icon>
      </button>
      
      <button mat-icon-button displayDensity="cosy"
        [matTooltip]=" 'PAC.ACTIONS.Download' | translate: {Default: 'Download'} "
        matTooltipPosition="above"
        (click)="onDownload(item.id)">
        <mat-icon fontSet="material-icons-outlined">file_download</mat-icon>
      </button>
      <button mat-icon-button displayDensity="cosy" ngmAppearance="danger"
        [matTooltip]=" 'PAC.ACTIONS.Delete' | translate: {Default: 'Delete'} "
        matTooltipPosition="above"
        (click)="onDelete(item)"
      >
        <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
      </button>
    </div>
  } @else {
    <div class="pac__table-actions flex items-center">
      <button mat-icon-button displayDensity="cosy" 
        [matTooltip]="'PAC.ACTIONS.CreateModel' | translate: {Default: 'Create Model'}"
        matTooltipPosition="above"
        (click)="onNewModel(key)"
      >
        <mat-icon fontSet="material-icons-outlined">add</mat-icon>
      </button>
    </div>
  }
</ng-template>
